<template>
    <!-- 可视化卡片组件 -->
    <div class="statistics_card_container" :style="{backgroundColor:props.data.color,height :props.data.height}">
        <div class="icon">
            <img :src="props.data.icon" alt="">
        </div>
        <div class="card_content">
            <div class="value">{{props.data.value}}</div>
            <div class="title">{{props.data.title}}</div>
        </div>
    </div>
</template>
<script setup>
import { defineProps, onMounted } from 'vue';
const props = defineProps({
    /**
     * @property {Object} data - 卡片数据
     * @property {String} data.title - 卡片标题
     * @property {String} data.value - 卡片值
     * @property {String} data.color - 卡片颜色
     * @property {String} data.icon - 图标
     * @property {String} data.height - 卡片高度,默认170px
     * 
     */
    data:{
        type:Object,
        default:()=>{
            return {}
        }
    }
})
</script>
<style scoped>
.statistics_card_container{
    width: 600px;
    min-width: 200px;
    height: 170px;
    box-sizing: border-box;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 20px 70px;
    box-sizing: border-box;
    gap: 100px;
}
.statistics_card_container .icon{
    height: 90%;
    aspect-ratio: 1/1;
    flex-shrink: 0;
}
.icon img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.statistics_card_container .card_content{
    width: fit-content;
    height: 140px;
    box-sizing: border-box;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}   
.title{
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
    color: #fff;
}
.value{
    font-size: 2rem;
    font-weight: bold;
    text-align: left;
    color: #fff;
}
</style>